<template>
  <div class="wh hide" id="wrap" style="overflow: hidden">
    <div class="page1 page" style="position: relative">
      <div class="container" id="scroller">
        <div class="content" style="display: flex;flex-direction: column;">
          <img style="z-index: -1;position: absolute;left: 0;right: 0;top:0;bottom: 0;width: 100vw" :src="`/img/background.jpg`" :onerror="defaultImg">
<!--          <div style="width: 100%;height: 80px;line-height: 80px;color:rgb(255,255,208);letter-spacing: 1px;font-size: 16pt;text-align: center">-->
<!--            {{logo}}-->
<!--          </div>-->
<!--          <div style="z-index: 2;height: 60px;line-height: 80px;padding-left: 20px;font-size:14pt;display: block;width: 50vw">-->
<!--            <div style="color:rgb(255,255,208);font-family: '黑体';letter-spacing: 1px">{{logo}}</div>-->
<!--          </div>-->
          <div style="padding: 0;overflow-y: auto;" class="hiidenScroll">
<!--            <div style="background-color:white;height:90%;border-radius: 20px;opacity: .8;overflow-y: auto;overflow-x: hidden;padding: 12px">-->
<!--              <div class="" v-html="rule" style="color:darkred">-->
<!--              </div>-->
<!--            </div>-->
            <img style="width: 100%" :src="ruleImg" alt="">
          </div>
<!--          <div style="width: 100%;height: 88px;text-align: center;"></div>-->
          <div style="width: 100%;height: 88px;text-align: center;position: fixed;bottom: 0">
            <img :src="btn" class="btn btn-back" style="width: 200px;cursor: pointer" @click="goback">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getbackground ,getRule} from '@/api/api'
import btn from '@/assets/btn2.png'
import rule from '@/assets/rule.png'
export default {
  name: "rule",
  data(){
    return{
      bgurl:process.env.VUE_APP_API_BASE,
      logo: '',
      rule: '',
      btn: btn,
      defaultImg: 'this.src="' + require('@/assets/MG149.jpeg') + '"',
      ruleImg: rule
    }
  },
  mounted() {
    // getbackground().then(result => {
    //   this.logo = result.data.logo
    // })
    getRule().then(result => {
      this.rule = result.data.content
    })
  },
  methods:{
    goback(){
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.btn-back {

  -webkit-animation: bounceInUp 1s linear both, icon 3.0s ease 1s infinite;
}
.hiidenScroll{
  -ms-overflow-style: none;
  overflow: auto;
}
.hiidenScroll::-webkit-scrollbar { display: none;}
</style>
